<!--  -->
<template>
  <div class="container">
    <van-toast id="van-toast" />
    <div
      class="header"
      @click="backToMe"
    >
      <p class="xsj">
        <i-icon
          type="return"
          size="20"
          color="#f7f7f7"
        />
      </p>
      <p class="orderInfo">قايتىش</p>
    </div>
    <div
      class="noData"
      style="margin-top:200rpx;"
      v-show="dataFlag"
    >
      <p>ھازىرچە سانلىق مەلۇمات يوق</p>
    </div>
    <div
      class="orderContainer"
      v-show="!dataFlag"
    >
      <div
        class="order"
        v-for="(item,index) in orderList"
        :key="index"
      >
        <img :src="'https://wx.2xur7.cn/static/images/icons/'+item.order_type+'.png'">
        <span class="time">{{item.create_time}}</span>
        <span class="order-type">{{item.order_type=='phoneCharge'?'تېلىفۇن ھەققى':'ئېقىم'}}</span>
        <span class="tel-number">{{item.tel_number}}</span>
        <span class="right">
          <p class="goods-val">{{item.goods_val}}</p>
          <p class="sell-price">-{{item.sell_price}}</p>
        </span>
        <span class="state">{{state}}</span>
      </div>
      <p
        class="text-footer"
        v-if="!more"
      >تۈگىدى</p>
    </div>
  </div>
</template>

<script>
import qs from "qs";
export default {
  data() {
    return {
      orderList: [],
      dataFlag: false,
      pageIndex: 0,
      more: false,
      type: "",
      state: "قاچىلىنىپ بولدى"
    };
  },
  methods: {
    backToMe() {
      wx.navigateBack({
        delta: 1 //返回的页面数，如果 delta 大于现有页面数，则返回到首页,
      });
    },
    async getList(init) {
      wx.showLoading({});
      if (init) {
        this.pageIndex = 0;
        this.more = true;
      }
      let openid = wx.getStorageSync("userInfo").openId;
      let postOpenID = { openid: openid, pageIndex: this.pageIndex };
      let orderList = await this.$http.get(
        "https://wx.2xur7.cn/weapp/orderlist",
        postOpenID
      );
      orderList = orderList.data.data.order;
      orderList.forEach(ele => {
        ele.create_time = ele.create_time.slice(5, 10).replace("/", "-"); //.split("-");
        // ele.create_time = `${timeArr[0]} ئاينىڭ${timeArr[1]} كۈنى`;
        if (ele.goods_val.includes("元")) {
          ele.goods_val = ele.goods_val.replace("元", " يۈەن");
        }
      });
      if (orderList.length < 10 && this.pageIndex > 0) {
        this.more = false;
      }
      if (init) {
        this.orderList = orderList;
      } else {
        this.orderList = this.orderList.concat(orderList);
      }
      if (!this.orderList.length) {
        this.dataFlag = true;
      }
      wx.hideLoading();
      // console.log(this.orderList);
    }
  },
  async mounted() {
    this.getList(true);
  },
  onReachBottom() {
    // console.log("ok");
    if (!this.more) {
      return false;
    }
    this.pageIndex += 1;
    this.getList();
  }
};
</script>
<style lang='scss'>
body {
  background-color: #fff;
}
.container {
  .header {
    height: 80rpx;
    background-color: #2db7f5;
    width: 100%;
    margin-bottom: 12rpx;
    .xsj {
      float: left;
      padding-top: 15rpx;
      padding-left: 21rpx;
    }
    .orderInfo {
      // display: inline-block;
      font-size: 31rpx;
      margin-left: 5rpx;
      color: #f7f7f7;
      padding-top: 15rpx;
      float: left;
      font-family: "UKIJ Ekran";
      // margin-left: 10rpx;
      // padding-top: 68px;
      ::after {
        content: "";
        display: inline-block;
        clear: both;
      }
    }
  }
  .noData {
    width: 90%;
    margin: 0 auto;
    color: #bbbec4;
    text-align: center;
    font-size: 30rpx;
  }
  .orderContainer {
    .order {
      position: relative;
      background-color: #fff;
      width: 97%;
      height: 130rpx;
      border-radius: 17rpx;
      margin: 0 auto;
      box-shadow: 0 0 10rpx 2rpx rgba(0, 0, 0, 0.1);
      margin-bottom: 16rpx;

      img {
        height: 95rpx;
        width: 95rpx;
        // margin-top: 17rpx;
        margin-left: 20rpx;
      }
      .tel-number {
        color: #666;
        font-size: 33rpx;
        font-family: Arial;
        vertical-align: -8rpx;
        margin-left: 25rpx;
      }
      .time {
        color: #c8c8c8;
        font-size: 24rpx;
        // direction: rtl;
        width: 80rpx;
        position: absolute;
        top: 93rpx;
        left: 35rpx;
        font-family: Arial;
      }
      .order-type {
        width: 210rpx;
        text-align: center;
        color: #666;
        font-size: 31rpx;
        font-family: "Alp Ekran";
        // vertical-align: 61rpx;
        // margin-left: -180rpx;
        position: absolute;
        // top: 6rpx;
        top: 22rpx;
        left: 133rpx;
      }
      .right {
        color: #666;
        font-size: 33rpx;
        float: right;
        display: flex;
        font-family: Arial;
        flex-direction: column;
        flex-wrap: wrap;
        margin-top: 13rpx;
        margin-right: 13rpx;
        .goods-val {
          direction: rtl;
          font-family: "Alp Ekran";
          margin-top: 8rpx;
          margin-bottom: 13rpx;
          padding-left: 20rpx;
          width: 150rpx;
          text-align: center;
          padding-left: 10rpx;
        }
        .sell-price {
          // font-family: "Alp Ekran";
          widows: 84rpx;
          text-align: center;
          font-weight: bold;
          padding-left: 10rpx;
        }
      }
      .state {
        position: absolute;
        top: 33%;
        right: 25%;
        width: 166rpx;
        height: 50rpx;
        background-color: #2db7f5;
        border-radius: 33rpx;
        text-align: center;
        font-size: 24rpx;
        color: #fff;
        line-height: 50rpx;
        text-align: center;
        padding: 0 10rpx;
      }
    }
    .text-footer {
      margin-top: 15rpx;
      color: #c2c2c2;
      text-align: center;
      font-size: 30rpx;
    }
  }
}
</style>